<template>
  <b-container class="my-5">
    <b-row align-h="center" style="margin-top:15%">
      <b-form>
        <b-form-group label="用户名:" label-for="UserName">
          <b-form-input id="UserName" v-model="form.UserName" required placeholder="输入用户名"></b-form-input>
        </b-form-group>

        <b-form-group label="密码:" label-for="Password">
          <b-form-input
              type="password"
              id="Password"
              v-model="form.Password"
              required
              placeholder="输入密码"
          ></b-form-input>
        </b-form-group>

        <b-button to="/" variant="info">返回</b-button>&nbsp;
        <b-button @click="Login" variant="danger">登录</b-button>
      </b-form>
    </b-row>
  </b-container>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {
        UserName: "",
        Password: ""
      }
    };
  },
  methods: {
    Login() {
      if (this.form.UserName !== "" && this.form.Password !== "") {
        console.log("username:", this.form)
        axios
            .post("/dev_api/login", this.$qs.stringify({
                  username: this.form.UserName,
                  password: this.form.Password
                })
            )
            .then(response => {
              if (response.data.code === 200) {
                this.$store.commit("changeLoginState", {
                  isLogin: true,
                  username:this.form.UserName,
                  uid:response.data.data.id,
                  token: response.data.data.token
                });
                console.log("response:", response.data.data)
                console.log("存储的token:", this.$store.state.token)
                this.$router.push("/");
              } else {
                console.log(response.data)
              }
            })
            .catch(error => {
              console.log(error)
            })
      } else {
        this.$bvToast.toast("用户名或者密码不能为空!", {
          title: "消息",
          variant: "danger",
          autoHideDelay: 1000,
          solid: true
        });
      }
    },
    mounted() {
      // 隐藏导航栏
      this.$parent.show_nav = false;
    },
    destroyed() {
      // 恢复导航栏
      this.$parent.show_nav = true;
    }
  }
}
</script>

<style scoped>
</style>